<template>
  <div class="content">
    <div class="content_head">
      <el-button type="text" @click="add(0)">添加目录</el-button>
    </div>
    <div class="category_div">
      <div class="category_item" v-for="(item,index) in categoryData" :key="index">
        <div class="category_left">
          <img class="category_img" :src="item.imageUrl" />
          <div class="category_name_div">
            <div class="category_name">{{item.name}}</div>
            <div class="category_subName">{{item.subName}}</div>
          </div>
        </div>
        <div>
          <i style="font-size:20px;margin:0 5px" @click="edit(item)" class="el-icon-edit"></i>
          <i
            style="font-size:20px;margin:0 5px"
            @click="del(item.id)"
            class="el-icon-remove-outline"
          ></i>
        </div>
      </div>
    </div>

    <el-dialog center title="添加" width="600px" :visible.sync="visible">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入类目名称" />
        </el-form-item>
        <el-form-item label="副名称" prop="name">
          <el-input v-model="form.subName" placeholder="请输入类目名称" />
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            :headers="header"
            :action="action"
            list-type="picture-card"
            :file-list="fileList"
            :on-exceed="handleLimit"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :limit="2"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="显示" prop="show">
          <el-switch v-model="form.show" active-color="#409EFF" inactive-color="#C0CCDA"></el-switch>
        </el-form-item>
        <el-form-item label="排序" prop="order">
          <el-input v-model="form.order" placeholder="请输入类目排序" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="addCategory('form')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog center title="修改" width="600px" :visible.sync="visible1">
      <el-form :model="form" :rules="rules" ref="form1" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入类目名称" />
        </el-form-item>
        <el-form-item label="副名称" prop="name">
          <el-input v-model="form.subName" placeholder="请输入类目名称" />
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            :on-exceed="handleLimit"
            :headers="header"
            :file-list="fileList"
            :action="action"
            list-type="picture-card"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :limit="2"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="显示" prop="show">
          <el-switch v-model="form.show" active-color="#409EFF" inactive-color="#C0CCDA"></el-switch>
        </el-form-item>
        <el-form-item label="排序" prop="order">
          <el-input v-model="form.order" placeholder="请输入类目排序" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="updateCategory('form1')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { update, list, add, del } from "@/api/category.js";
import { getToken } from "@/utils/auth.js";
export default {
  data() {
    return {
      action: "",
      fileList: [],
      visible1: false,
      id: "",
      header: {},
      rules: {
        name: [{ required: true, message: "请输入类目名称", trigger: "blur" }],
        order: [{ required: true, message: "请输入类目排序", trigger: "blur" }],
        show: [{ required: true, message: "请输入类目显示", trigger: "blur" }]
      },
      form: {
        show: true,
        order: 0,
        name: "",
        subName: ""
      },
      visible: false,
      categoryData: []
    };
  },
  mounted() {
    this.action = this.$UPLOAD;
    this.getData();
    this.header = { token: getToken() };
  },
  methods: {
    updateCategory(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.fileList.length == 0) {
            this.$message({
              type: "error",
              message: "请上传图片"
            });
            return;
          }
          update(
            this.form.id,
            this.form.name,
            this.form.subName,
            this.id,
            this.fileList[0].url,
            this.form.order,
            this.form.show ? 0 : 1
          ).then(res => {
            this.$message({
              type: "success",
              message: res.message
            });
            this.visible1 = false;
            this.form.imageUrl = "";
            this.$refs[name].resetFields();
            this.getData();
          });
        }
      });
    },
    addCategory(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.fileList.length == 0) {
            this.$message({
              type: "error",
              message: "请上传图片"
            });
            return;
          }
          add(
            this.form.name,
            this.form.subName,
            this.fileList[0].url,
            this.form.order,
            this.form.show ? 0 : 1
          ).then(res => {
            this.$message({
              type: "success",
              message: res.message
            });
            this.visible = false;
            this.form.imageUrl = "";
            this.$refs[name].resetFields();
            this.getData();
          });
        }
      });
    },
    handleLimit() {
      this.$message({
        type: "warning",
        message: "只能上传一张图片"
      });
    },
    handleRemove(file, fileList) {
      this.fileList = [];
    },
    handleSuccess(response, file, fileList) {
      if (response.code != 2000) {
        this.$message({
          type: "error",
          message: response.message
        });
        return;
      }
      this.fileList = [];
      this.fileList.push({ name: "xx.jpg", url: response.data });
    },
    edit(data) {
      this.fileList = [];

      this.form.id = data.id;
      this.form.name = data.name;
      this.form.order = data.shortOrder;
      this.form.show = data.showX == 0 ? true : false;
      this.form.subName = data.subName;
      this.fileList.push({
        name: "xx.jpg",
        url: data.imageUrl
      });
      this.visible1 = true;
    },
    del(id) {
      window.event.cancelBubble = true;
      this.$confirm("此操作将删除该目录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          del(id).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    add(id) {
      window.event.cancelBubble = true;
      this.visible = true;
      this.id = id;
      this.form = {
        show: true,
        order: 0,
        name: ""
      };
      this.fileList = [];
    },
    getData() {
      list().then(res => {
        this.categoryData = res.data;
      });
    }
  }
};
</script>
<style scoped>
.content {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}
.content_head {
  width: 800px;
  display: flex;
  justify-content: flex-end;
}
.category_div {
  display: flex;
  flex-direction: column;
  width: 800px;
  background-color: #ffffff;
  padding: 20px;
}
.category_img {
  width: 50px;
  height: 50px;
}
.category_item {
  display: flex;
  border-bottom: 1px solid #e4e7ed;
  align-items: center;
  height: 70px;
  justify-content: space-between;
}
.category_left {
  display: flex;
}
.category_name {
  font-size: 16px;
  color: #303133;
}
.category_subName {
  margin-top: 10px;
  font-size: 12px;
  color: #606266;
}
.category_name_div {
  height: 50px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>


